{% extends 'base/base.html' %}

{% block link %}
  <link rel="stylesheet" href="{% static '/css/course/course-detail.css' %}">
{% endblock %}

{% block title %}
  课程详情页
{% endblock %}

<!-- main start -->
{% block main_start %}
  <main id="main">
    <div class="w1200">
      <div class="course-contain">

        <div class="course-top-contain">
          <h4 class="course-title">{{ course.title }}</h4>
{#          <div class="course-other clearfix">#}
{#            <div class="share-list">#}
{#              <span>分享至:</span>#}
{#              <i class="PyWhich py-weibo"></i>#}
{#            </div>#}
{#            <div class="buy-list">#}
{#              <span class="price">免费</span>#}
{#            </div>#}
{#          </div>#}
        </div>

        <div class="course-video" id="course-video">
        <span class="course-data" style="display: none;" data-video-url="{{ course.video_url }}"
              data-cover-url="{{ course.cover_url }}">
        </span>
        </div>

        <div class="course-bottom-contain">
          <div class="course-detail-list">
            <div class="course-item clearfix">
              <h5 class="course-title">{{ course.title }}</h5>
              <div class="teacher-box clearfix">
                <img src="{{ course.teacher.avatar_url }}" alt="{{ course.teacher.name }}"
                     title="{{ course.teacher.name }}" class="teacher-avatar">
                <div class="teacher-info">
                  <p class="teacher-name">{{ course.teacher.name }}</p>
                  <p class="teacher-identify">{{ course.teacher.positional_title }}</p>
                </div>
              </div>
              <div class="item-content">
                {{ course.teacher.profile }}
              </div>
            </div>
            <div class="course-item clearfix">
              <h5 class="course-title">课程简介</h5>
              <div class="item-content">
                {{ course.profile }}
              </div>
            </div>
            <div class="course-item clearfix">
              <h5 class="course-title">课程大纲</h5>
              <div class="item-content">
                <p>{{ course.outline }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
{% endblock %}
<!-- main end -->

{% block script %}
  <script src="https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js"></script>
  <script src="{% static 'js/course/course_detail.js' %}"></script>
{% endblock %}